export default [
  "number",
  "json",
  "string",
  "$rotate",
  "$getLoopColors",
  function ($number, $json, $string, $rotate, $getLoopColors) {
    return {
      attrs: {
        radius: $number(200),
        data: $json([]),
        select: $string("-1"),
      },
      region: {
        default: function (render, attr) {
          let all = attr.data.reduce((n, item) => {
            return n + item.value;
          }, 0);
          let beginDeg = -0.5 * Math.PI;
          for (let i = 0; i < attr.data.length; i++) {
            let deg = (attr.data[i].value / all) * 2 * Math.PI;
            render("" + i)
              .beginPath()
              .moveTo(200, 200)
              .arc(200, 200, attr.radius, beginDeg, deg)
              .fill();
            beginDeg += deg;
          }
        },
      },
      link(painter, attr) {
        // var gradient = painter.createLinearGradient(100, 100, 200, 100)
        // gradient.addColorStop(0, 'red')
        // gradient.addColorStop(0.5, 'green')
        // gradient.addColorStop(0.8, 'blue')
        // var gradientColor = gradient.value()
        // painter.config({'fillStyle':gradientColor}).fillRect(100,100, 200,100);
        let colors = $getLoopColors(attr.data.length);
        let all = attr.data.reduce((n, item) => {
          return n + item.value;
        }, 0);
        let beginPoint = {
          x: 200,
          y: 100,
        };
        let allDeg = 0;
        let beginDeg = -0.5 * Math.PI;
        for (let i = 0; i < attr.data.length; i++) {
          let deg = (attr.data[i].value / all) * 2 * Math.PI;
          allDeg += deg;
          let piantPoint = $rotate(
            200,
            200,
            allDeg - 0.5 * deg,
            beginPoint.x,
            beginPoint.y
          );
          painter
            .config({
              fillStyle: colors[i],
              "font-size":20
                // shadowColor: "gray",
                // shadowBlur: 16,
            })
            .beginPath()
            .moveTo(200, 200)
            .arc(
              200,
              200,
              attr.select == i ? attr.radius * 1.2 : attr.radius,
              beginDeg,
              deg
            )
            .fill()
            painter.config({fillStyle:"black",textAlign:'center'}).fillText(attr.data[i].key, piantPoint[0], piantPoint[1]);
          beginDeg += deg;
        }
      },
    };
  },
];
